<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link ref="tag" tag="span" class="tags-view-item active" :to="{ path: '/' }">
          生产计划进度详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle2 title="实际达成率和计划完成度" class="float margin" style="width: 32.3%">
          <div class="change" slot="select" @click="isTop1Show=!isTop1Show">切换</div>
          <div class="flex_center" slot="content">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange1" />
            <el-select v-model="top1Form.type" placeholder="请选择" style="width:80px" size="mini" @change="top1FormChange"
              v-if="!isTop1Show">
              <el-option v-for="item in [{value:'',label:'全部'},{value:'1',label:'追加'},{value:'0',label:'基本'}]"
                :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="flex_center Echarts" slot="content" v-if="!isTop1Show">
            <PieImg3 :data="top1a" :isLenged="false" itemWidth="0.99" :showTooltip="true" cirLeft="1.6"
              :showLabel="true" :img="require('@/assets/images/echarts/djdscwc.png')" :color="[
            '#00ebcd',
            '#ff7474']" />
            <div style="width: 100%; height: 100%" class="flex_center">
              <div class="clzdjd_box">
                <div class="clzdjd_item flex_center" v-for="(item, index) in top1b" :key="index">
                  <div class="clzdjd_item_left flex_between">
                    <div class="bigCir flex_center" :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }">
                      <div class="smallCir" :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"></div>
                      <div class="border" :style="{ background: 'rgba(' + color[index] + ',1)' }"></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div class="lt" :style="{ color: 'rgba(' + color[index] + ',1)' }">
                      {{ item.name }}
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-if="top1b[0].value!=0">
                      <div v-if="item.value/top1b[0].value<=1">
                        {{ item.value }}箱<span :style="{ color: 'rgba(' + color[index] + ',1)!important' }"
                          v-show="index!=0"> / {{((item.value/top1b[0].value)*100).toFixed(1)}}%</span>
                      </div>
                      <div v-if="item.value/top1b[0].value>1">
                        {{ item.value }}箱<span :style="{ color: 'rgba(' + color[index] + ',1)!important' }"
                          v-show="index!=0"> / 100%</span>
                      </div>
                    </div>
                    <div class="rt" :style="{ color: 'rgba(' + color[index] + ',1)' }" v-else>
                      {{ item.value }}箱<span :style="{ color: 'rgba(' + color[index] + ',1)!important' }"
                        v-show="index!=0"> / 0%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="Echarts flex_center title_box_bc" slot="content" v-if="isTop1Show">
            <div class="calculagraph_left">
              <Ring class="ring" :data="{allRate:top1c.dcl}" subtext="" titleTop="42%" />
              <!-- <div class="label" style="margin-top:1px">实际达成率</div> -->
            </div>
            <div class="calculagraph_right">
              <StrokeItem rightWidth="55%" leftWidth="45%" title="实际生产量" :number="top1c.sjscl"
                style="margin-bottom:10px" />
              <StrokeItem rightWidth="55%" leftWidth="45%" title="基本计划生产量" :number="top1c.jhscl"
                style="margin-bottom:10px" />
              <div class="label" style="margin-top:1px;margin-bottom:10px">单位：标准箱</div>
            </div>
          </div>
        </StrokeTitle2>

        <StrokeTitle title="分类统计" class="float margin" style="width: 32.4%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount3All">
              全部
            </div>
          </div>
          <XRow class="Echarts" barWidth="6" :data="top3" barLeft="10%" :xAxisShow="false" barRight="22%"></XRow>
        </StrokeTitle>
        <StrokeTitle title="来源分析" class="float margin" style="width: 32.3%">
          <TwoRow barWidth="6" style="height: 100%" :data="top2"></TwoRow>
        </StrokeTitle>
      </div>
      <div class="content_center">
        <StrokeTitle title="全部计划占比统计" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange3" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount4All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg :data="center1" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2"
              :img="require('@/assets/images/echarts/djdscqb.png')" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="已完成占比" class="float margin" style="width: 32.3%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange4" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount40All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLast="()" :data="center2" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2"
              :img="require('@/assets/images/echarts/djdscwc.png')" />
          </div>
        </StrokeTitle>
        <StrokeTitle title="未完成占比" class="float margin" style="width: 32.4%">
          <div class="flex_center">
            <ElementRadio v-model="model" :isButton="true" @change="radioChange5" />
            <div class="all_box" style="margin-left:0px" @click="productPlanCount41All">
              全部
            </div>
          </div>
          <div class="flex_center Echarts">
            <PieImg legendLast="()" :data="center3" legendLeft="28%" length="5" itemWidth="0.95" cirLeft="0.2"
              :img="require('@/assets/images/echarts/djdscwwc.png')" />
          </div>
        </StrokeTitle>
      </div>
      <div class="content_bottom">
        <StrokeTitle title="近十二个月生产天数统计" class="float margin" style="width: 99%">
          <MoreDirection :data="bottom" gridLeft="10%" gridRight="10%" :isCategory="false" :yAxisLineShow="true"
            :xAxisLineShow="true" :legendData="['天数']" yUnit="单位：天" barWidth="21" style="height: calc(100% - 0px)" />
        </StrokeTitle>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import PieImg3 from "@/components/echarts/pie/img3.vue";
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import {
    ProductPlanCount1,
    ProductPlanCount2,
    ProductPlanCount3,
    ProductPlanCount4,
    ProductPlanCount5,
    ProductPlanCount6,
    ProductPlanCount7,
    ProductPlanCount1_1,
  } from "@/api/echarts/productionDesign/index";

  import TwoRow from "@/components/echarts/bar/twoRow.vue";
  export default {
    components: {
      TwoRow,
      PieImg3,
      StrokeTitle2,
    },
    data() {
      return {
        color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
        model: "month",
        //计划完成度
        top1a: [],
        //计划完成度
        top1b: [{ value: 0 }],
        //实际达成率
        top1c: { sjscl: 0, jhscl: 0, dcl: 0 },
        //计划完成度
        top1Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          type: "",
        },
        //达成率是否显示
        isTop1Show: true,

        //来源分析
        top2: {},
        //分类统计
        top3: [],
        //分类统计
        top3Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
        },
        //全部计划占比统计
        center1: [],
        center1Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
        },
        //已完成计划占比统计
        center2: [],
        center2Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          status: "2",
        },
        //未完成计划占比统计
        center3: [],
        center3Form: {
          pDateEnd: this.$getMonth("e"),
          pDateStart: this.$getMonth("s"),
          status: "1",
        },
        //近十二个月生产天数统计
        bottom: [],
      };
    },
    mounted() {
      this.productPlanCount1();
      this.productPlanCount2();
      this.productPlanCount3();
      this.productPlanCount4();
      this.productPlanCount40();
      this.productPlanCount41();
      this.productPlanCount5();
    },
    methods: {
      //计划完成度
      productPlanCount1() {
        ProductPlanCount1(this.top1Form).then((res) => {
          if (res.code == 200) {
            this.top1a = JSON.parse(JSON.stringify(res.data));
            this.top1a = this.top1a.slice(1);
            this.top1b = JSON.parse(JSON.stringify(res.data));
          }
        });
        ProductPlanCount1_1(this.top1Form).then((res) => {
          if (res.code == 200) {
            // console.log(res);
            this.top1c.jhscl = res.data[0].value;
            this.top1c.sjscl = res.data[1].value;
            if (this.top1c.jhscl == 0) {
              this.top1c.dcl = "0%";
            } else {
              this.top1c.dcl =
                (Number(res.data[1].value / res.data[0].value) * 100).toFixed(1) +
                "%";
            }
          }
        });
      },
      //form1类型切换
      top1FormChange() {
        this.productPlanCount1();
      },
      radioChange1(event) {
        this.top1Form.pDateStart = event[0];
        this.top1Form.pDateEnd = event[1];
        this.productPlanCount1();
      },
      //来源分析
      productPlanCount2() {
        ProductPlanCount2().then((res) => {
          if (res.code == 200) {
            var obj = {
              xData: [],
              yData1: [],
              yData2: [],
              yData3: [],
              yData4: [],
              yData5: [],
              yData6: [],
            };
            for (let item of res.data) {
              obj.xData.push(item.name);
              obj.yData1.push(item.value1);
              obj.yData2.push(item.value2);
              obj.yData3.push(item.value3);
              obj.yData4.push(item.value4);
              obj.yData5.push(item.value5);
              obj.yData6.push(item.value6);
            }
            this.top2 = obj;
          }
        });
      },
      //分类统计
      productPlanCount3() {
        ProductPlanCount3(this.top3Form).then((res) => {
          if (res.code == 200) {
            // console.log(3, res);
            this.top3 = res.data;
          }
        });
      },
      //分类统计-全部
      productPlanCount3All() {
        let obj = JSON.parse(JSON.stringify(this.top3Form));
        obj.all = "111";
        ProductPlanCount3(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.tableData.data = res.data;
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.right.unit = "";
          }
        });
      },
      radioChange2(event) {
        this.top3Form.pDateStart = event[0];
        this.top3Form.pDateEnd = event[1];
        this.productPlanCount3();
      },
      //全部计划占比统计
      productPlanCount4() {
        ProductPlanCount4(this.center1Form).then((res) => {
          if (res.code == 200) {
            this.center1 = res.data;
          }
        });
      },
      //全部计划占比统计-全部
      productPlanCount4All() {
        let obj = JSON.parse(JSON.stringify(this.center1Form));
        obj.all = "111";
        ProductPlanCount4(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "%";
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.tableData.column[4].prop = "";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange3(event) {
        this.center1Form.pDateStart = event[0];
        this.center1Form.pDateEnd = event[1];
        this.productPlanCount4();
      },
      //已完成占比统计
      productPlanCount40() {
        ProductPlanCount6(this.center2Form).then((res) => {
          if (res.code == 200) {
            this.center2 = res.data;
          }
        });
      },
      //已完成占比统计-全部
      productPlanCount40All() {
        let obj = JSON.parse(JSON.stringify(this.center2Form));
        obj.all = "111";
        ProductPlanCount6(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "标准箱";
            this.$refs.AllDialog.tableData.column[3].prop = "value2";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange4(event) {
        this.center2Form.pDateStart = event[0];
        this.center2Form.pDateEnd = event[1];
        this.productPlanCount40();
      },
      //未完成占比统计
      productPlanCount41() {
        ProductPlanCount7(this.center3Form).then((res) => {
          if (res.code == 200) {
            this.center3 = res.data;
          }
        });
      },
      //未完成占比统计-全部
      productPlanCount41All() {
        let obj = JSON.parse(JSON.stringify(this.center3Form));
        obj.all = "111";
        ProductPlanCount7(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.dialogTableVisible = true;
            this.$refs.AllDialog.right.unit = "标准箱";
            this.$refs.AllDialog.tableData.column[3].prop = "value2";
            this.$refs.AllDialog.tableData.data = res.data;
          }
        });
      },
      radioChange5(event) {
        this.center3Form.pDateStart = event[0];
        this.center3Form.pDateEnd = event[1];
        this.productPlanCount41();
      },
      //近十二个月生产计划天数统计
      productPlanCount5() {
        ProductPlanCount5().then((res) => {
          if (res.code == 200) {
            this.top5 = [];
            for (var i = 0; i < res.data.length; i++) {
              let obj = {};
              obj.name = res.data[i].name;
              obj.value1 = res.data[i].value;
              this.bottom.push(obj);
            }
          }
        });
      },
    },
  };
</script>


<style lang="scss" scoped>
  .productionDesign_box {
    .content {

      .content_top,
      .content_bottom,
      .content_center {
        width: 100%;
        height: 35.2%;

        .clzdjd_box {
          width: 100%;
          height: 190px;
          position: relative;
          left: -5%;

          .clzdjd_item {
            height: 100%;
            height: 60px;

            .clzdjd_item_left {
              width: 13%;
              height: 100%;
              position: relative;

              .index {
                position: absolute;
                color: #ffffff;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
              }

              .bigCir {
                width: 25px;
                height: 25px;
                border: 1px solid #02d5c2;
                border-radius: 50%;
                position: relative;
                left: -0%;

                .smallCir {
                  width: 15px;
                  height: 15px;
                  border: 1px solid #02d5c2;
                  border-radius: 50%;
                }

                .border {
                  width: 1px;
                  height: 20px;
                  background: #02d5c2;
                  position: absolute;
                  top: 130%;
                }
              }
            }

            .clzdjd_item_right {
              width: 70%;
              width: 240px;
              height: 75%;
              // margin-left: 1%;
              max-width: 435px;
              max-height: 124px;
              background: linear-gradient(180deg,
                  rgba(44, 119, 187, 0.6) 0%,
                  rgba(18, 81, 141, 0.6) 100%);
              border: 1px solid rgba(52, 134, 218, 0.6);
              font-size: 14px;
              color: #00ebcd;

              .lt {
                width: 40%;
                text-align: left;
              }

              .rt {
                width: 56%;
                padding-left: 0px;
                font-weight: 700;
                text-align: right;
              }
            }
          }

          .clzdjd_item:last-child .border {
            width: 0 !important;
          }
        }
      }

      .content_center {
        height: 31.7%;
      }

      .content_bottom {
        height: 25.7%;
      }

      .Echarts {
        height: calc(100% - 50px);

        .jxb_right {
          width: 260px;
          margin-left: -60px;

          .left {
            display: flex;
            flex-direction: column;
            align-items: center;

            .big_cir {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              border: 1px solid #086088;

              .small_cir {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 2px solid #02d5c2;
              }
            }

            .big_cir_blue {
              border: 1px solid #105b95;

              .small_cir_blue {
                border: 2px solid #1c9ad5;
              }
            }

            .and {
              width: 2px;
              height: 20px;
              margin: 8px 0;
              background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -webkit-gradient(linear,
                  left top,
                  left bottom,
                  color-stop(0%, #02d5c2),
                  color-stop(100%, #1c9ad5));
              background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
              background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
            }
          }

          .right {
            .item {
              width: 150px;
              height: 35px;
              border: 1px solid #086088;
              margin: 15px 10px;
              padding: 0 20px;

              .title,
              .number {
                font-size: 13px;
                color: #00ebcd;
              }

              .number {
                font-weight: 700;
              }
            }

            .item_blue {
              border: 1px solid #105b95;

              .title,
              .number {
                color: rgba(35, 195, 255, 1);
              }
            }
          }
        }
      }
    }
  }

  .title_box_bc {

    // box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
    .calculagraph_right,
    .calculagraph_left {
      width: 45%;
      height: 100%;
      // background: red;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;
      float: left;
      margin-left: -8%;
    }

    .calculagraph_right {
      align-items: flex-start;
      justify-content: center;
      width: 45%;
      height: 95%;
      margin-left: -6%;
    }
  }

  .change {
    width: 56px;
    height: 24px;
    opacity: 1;
    background: #0861bd;
    border: 1px solid rgba(0, 156, 255, 0.52);
    color: #d4f0ff;
    font-size: 14px;
    border-radius: 14px;
    text-align: center;
    line-height: 23px;
    cursor: pointer;
  }

  .ring {
    width: 128px;
    height: 128px
  }
</style>